import { View, Button, Text, Image, ScrollView } from "@tarojs/components";

import Taro from "@tarojs/taro";
import "./index.less";
import navImg from "../../public/nav.png";
import scrollBar from "../../public/scrollBar.jpeg";
import { useEffect, useState } from "react";
import { getIndexList } from "../../util/services";

const Index = () => {
  const [detail, setDetail] = useState();
  useEffect(() => {
    const list = getIndexList();
    setDetail(list[0]);
    console.log("LIST", list[0]);
  }, []);

  return (
    detail && (
      <View className="index">
        <View className="nav">
          <View className="left-icon">
            <i className="iconfont icon-menu1"></i>
          </View>
          <Image
            src={navImg}
            className="img"
            onClick={() => {
              Taro.navigateTo({ url: "/pages/index/index" });
            }}
          />
          <View
            className="right-icon"
            onClick={() => {
              Taro.navigateTo({ url: "/pages/index/index" });
            }}
          >
            <i className="iconfont icon-user1"></i>
          </View>
        </View>
        <View className="nav-top">
          <View className="left">
            <Image
              src={
                "https://p3-tt.byteimg.com/img/" + detail &&
                detail.thumbUri + "~152x214.jpg"
              }
            />
          </View>
          <View className="right"></View>
        </View>
        <Image src={scrollBar} className="wiper"></Image>

        <View style={{ height: "200px" }}></View>
        <View className="bottom-button">
          <View className="button">
            <Text>开始阅读</Text>
          </View>
        </View>
      </View>
    )
  );
};

export default Index;
